<template>
	<!-- 投放系统-用户列表 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('delivery:userStatistics:index')">
			<template v-if="dataForm['applet_ids']!=1&&dataForm['applet_ids']">
				<div class="d-flex b-s mt-2 mb-10 j-sb" slot="header">
					<el-form class="d-flex b-s" style="flex-wrap: wrap;" :inline="true" size="small" :model="searchForm"
						>
						<el-form-item label="用户ID" class="mr-20 mb-10">
							<el-input  id="yonghu" v-model="dataForm.user_id" placeholder="用户ID" clearable />
						</el-form-item>
						<el-form-item label="推广ID" class="mr-20 mb-10">
							<el-input id="tuiguan" v-model="dataForm.spread_id" placeholder="推广ID" clearable />
						</el-form-item>
						<el-form-item  label="推广链接" class="mr-20 mb-10">
							<el-select id="lianjie" filterable clearable v-model="spread_id2" placeholder="请选择推广链接" >
								<el-option v-for="(item,index) in promotionList" :key="index" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="date_type" label="时间" class="mr-20 mb-10">
							<el-select clearable v-model="dataForm.date_type" placeholder="请选择"
								@change="$forceUpdate()">
								<el-option v-for="(item,index) in dateType" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="日期 " class="mr-20 mb-10">
							<el-date-picker v-model="dataForm.created_at" type="datetimerange" range-separator="至"
							value-format="timestamp"  start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item  class="mb-10">
							<el-button icon="el-icon-search" type="primary" @click="getTableList(true)">查询</el-button>
						</el-form-item>
					</el-form>
					<div class="d-flex">
						<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
					</div>
				</div>
				<vxe-table ref="xTable" border height="100%" row-class-name="rowClassName" resizable :data="dataList" :loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}">
					<vxe-column width="180" field="id" title="用户ID" sortable align="center"></vxe-column>
					<vxe-column width="150" title="用户观看记录" align="center">
						<template v-slot="{ row }">
							<el-button icon="" size="small" round style="width: 70px;" type="primary" @click="checkBuyUser(row,3)">查看</el-button>
						</template>
					</vxe-column>
					<vxe-column width="150" title="用户购买短剧记录" align="center">
						<template v-slot="{ row }">
							<el-button icon="" size="small" round style="width: 70px;" type="primary" @click="checkBuyUser(row,1)">查看</el-button>
						</template>
					</vxe-column>
					<vxe-column width="150" title="用户充值记录" align="center">
						<template v-slot="{ row }">
							<el-button icon="" size="small" round style="width: 70px;" type="primary" @click="checkBuyUser(row,2)">查看</el-button>
						</template>
					</vxe-column>
					<vxe-column width="180" field="spread_id" title="推广ID" sortable align="center"></vxe-column>
					<vxe-column width="260" field="spread_name" title="推广链接名称" align="center"></vxe-column>
					<!-- <vxe-column width="180" field="username" title="用户昵称" align="center"></vxe-column> -->
					<vxe-column width="180" field="ml_coin" title="看币" sortable align="center"></vxe-column>
					<vxe-column width="180" field="give_coin" title="赠送看币" sortable align="center"></vxe-column>
					<vxe-column width="180" field="amount" title="累计充值" sortable align="center"></vxe-column>
					<vxe-column width="180" field="count" title="充值次数" sortable align="center"></vxe-column>
					<vxe-column width="180" field="is_vip" title="会员状态" align="center">
						<template v-slot="{row}">
							<div :class="row.is_vip==0?'text-black font-sm5':'text-yellow font-md2 font-weight'">{{row.is_vip==0?'非会员':'会员'}}</div>
						</template>
					</vxe-column>
					<vxe-column width="180" field="applet_name" title="小程序名称" align="center"></vxe-column>
					<vxe-column width="180" field="dyeing_time" title="当前染色时间" sortable align="center"></vxe-column>
					<vxe-column width="180" field="create_at" title="注册时间" sortable align="center"></vxe-column>
					<vxe-column width="180" field="ip" title="注册ip" align="center"></vxe-column>
					<template #empty>
						<div class="d-flex flex-row a-center j-center font-md">
							<div class="d-flex">
								暂时没有统计数据~
							</div>
						</div>
					</template>
				</vxe-table>
				<!-- 分页 -->
				<div class="d-flex" slot="footer">
					<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
						:page-size="dataForm.pageSize" :total="total" :pageSizes="[20,50,100,150,200]"
						:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
						@page-change="handlePageChange">
					</vxe-pager>
				</div>
			</template>
			<template v-else>
				<div class="d-flex a-center j-center h-100 b-s flex-column">
					<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="请先选择小程序" style="width: 300px;">
					<div class="d-flex">请先选择小程序</div>
				</div>
			</template>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
		<!-- 用户购买记录、用户充值记录弹窗 -->
		<user-statistics-buy-info v-if="buyVisible" ref="buyDialog" :duanju="duanju" @refreshDataList="getTableList($event)"></user-statistics-buy-info>
	</d2-container>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import userStatisticsBuyInfo from './userStatisticsBuyInfo'
	export default {
		mixins: [mixinViewModule],
		components: {
			userStatisticsBuyInfo
		},
		data() {
			return {
				dateType:[{
					label:'选择全部',
					value:''
				},{
					label:'注册时间',
					value:1
				},{
					label:'染色时间',
					value:2
				}],
				tableLoading:false,
				buyVisible:false,
				total: 0,
				searchForm: {
					keyword:''
				},
				spread_id2:null,
				dataForm: {
					date_type:'',
					page: 1,
					pageSize: 20
					
				},
				duanju:[],
				dataList: [],
				promotionList:[],
				diypage:1,
				diypageSize:20,
				pickerMinDate:null,
				pickerMaxDate:null
				
			}
		},
		created() {
			console.warn('createdcreatedcreatedcreatedcreatedcreated');
			this.dataForm['applet_ids'] = this.info.applet_id;
			this.dataForm['delivery_user_id'] = this.info.delivery_user_id;
			// this.getpromotionList()
		},
		mounted() {
			this.getPlayletList()
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		watch: {
			'info.applet_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (typeof newVal == 'number') {
							console.warn('========监听小程序ID发生变化=======');
							console.log(newVal);
							this.dataForm['applet_ids'] = newVal;
							this.$forceUpdate();
							if(newVal==1) return;
							if (this.$hasPermission('delivery:userStatistics:index')) {
								if(this.$hasPermission('delivery:delivery:teamList')){
									if(Array.isArray(this.dataForm['delivery_user_id'])){
										this.getTableList(true);
										this.spread_id2 = null
										this.getpromotionList()
									}
									return;
								}
								this.getTableList(true);
								this.spread_id2 = null
								this.getpromotionList()
								
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			'info.delivery_user_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (Array.isArray(newVal)) {
							console.warn('========投放组员ID发生变化=======');
							console.log(newVal);
							this.dataForm['delivery_user_id'] = newVal;
							this.$forceUpdate();
							if(this.dataForm['applet_ids']==1) return;
							if (this.$hasPermission('delivery:userStatistics:index')) {
								this.getTableList(true);
								this.getpromotionList()
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			async getPlayletList(){
				const tableRes = await this.$axios.get('/api/common/playlet');
				this.duanju = tableRes
				console.log(228,this.duanju)
			},
			async getpromotionList() {

				console.log(200,this.dataForm)
				let obj = {
					applet_id:this.dataForm.applet_ids,
					delivery_user_id:this.dataForm.delivery_user_id
				}
			    const tableRes = await this.$axios.post('/api/delivery/UserStatistics/getSearchSpread',obj);
				this.promotionList = tableRes
				console.log(201,tableRes)
				// this.dataList = tableRes.data;
				// this.total = tableRes.total;
			},
			async getTableList(init = false) {
				console.log(211)
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				let obj =JSON.parse(JSON.stringify(this.dataForm)) 
				if(!obj.spread_id && this.spread_id2){
					obj.spread_id = this.spread_id2
				}
				
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/delivery/UserStatistics?' + this.$qs.stringify(obj));
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
				
			},
			async checkBuyUser(row,type){
				console.log(row);
				this.buyVisible = true;
				let sData = {
					user_id:row.id,
					applet_id:this.dataForm['applet_ids']
				}
				let sRes;
				if(type==1){
					sRes = await this.$axios.post('/api/delivery/UserStatistics/getUserBuy',sData);
				}else if(type==2){
					sRes = await this.$axios.post('/api/delivery/UserStatistics/getUserRecharge',sData);
				}else if(type==3){
					
					console.log(283,this.dataForm.created_at)
					let _time =[]
					
						var currentDate = new Date();
						currentDate.setDate(1);
						currentDate.setHours(0, 0, 0, 0);
						var firstDayOfMonthTimestamp = Math.floor(currentDate?.getTime());
						_time.push(firstDayOfMonthTimestamp)

						var today = new Date();

						// 将时间设置为 00:00:00
						// today.setHours(0, 0, 0, 0);

						// 获取时间戳
						var timestamp = today.getTime();
						// timestamp =  timestamp + (1000 * 60 * 60 * 24 - 1000 )
						_time.push(timestamp)
						console.log(_time);
					
					sData.view_at = _time
					sData.page = this.diypage
					sData.pageSize = this.diypageSize
					sRes = await this.$axios.post('/api/delivery/UserStatistics/getUserView',sData);

				}
				
				this.$nextTick(() => {
					this.$refs.buyDialog.userId = null;
					this.$refs.buyDialog.type = type;
					this.$refs.buyDialog.init(row,sRes,sData);

					console.log(307,row,sRes,sData)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>